// ------------------------------
// edX Web Certificates: Print Specific Styling

// About: styling specific for print layouts.

// #UTILITIES
// #BASE
// #LAYOUT
// #ELEMENTS

// ------------------------------
// #UTILITIES
// ------------------------------

// page set up - only available to modern browsers now
@page {
    size: landscape;
}

@media print {

    // helpers
    %print-no-background {
        background: none !important;
    }

    %print-hide {
        display: none !important;
    }

    %print-black-on-white {
        background: palette(grayscale, white-t) !important;
        color: palette(grayscale, black-t) !important;
    }

    %print-layout-wrapper {
        padding: 0 !important;
    }

    %print-rendering-section {
        margin-bottom: spacing-vertical(small);
        border-bottom: none !important;
        padding-bottom: 0 !important;

        &:last-child {
            border: none;
            padding-bottom: 0;
        }
    }
}

// ------------------------------
// #BASE
// ------------------------------
@media print {

    // prevent images from bleeding over the edge of the printed page
    img {
       max-width: 100% !important;
    }

    // prevent large elements from being split across multiple pages
    ul, img {
       page-break-inside: avoid;
    }

    // reset body/view properties
    html,
    body {
        @extend %print-black-on-white;
    }

    body {
        margin: spacing-vertical(base) spacing-vertical(x-small) 0 spacing-vertical(x-small) !important;
        padding: 0;
        height: auto;
    }

    .wrapper-view {
        margin-bottom: 0 !important;
    }

    [class^="wrapper"]::after {
        display: none;
    }
}

// force background images and colors
@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

// ------------------------------
// #LAYOUT
// ------------------------------
@media print {

    // hide elements not needed for print rendering
    .wrapper-banner-user,
    .wrapper-header,
    .wrapper-accomplishment-metadata,
    .wrapper-accomplishment-support,
    .wrapper-footer {
        @extend %print-hide;
    }

    // remove layout wrappers' padding
    .wrapper-accomplishment-rendering {
        @extend %print-layout-wrapper;
    }
}

// ------------------------------
// #ELEMENTS
// ------------------------------
@media print {

    // bring styles into print context
    .hd-2 {
         margin-bottom: spacing-vertical(small);
         font-size: font-size(xxx-large);
         line-height: 1.2; // custom line-height
    }

    .hd-3 {
        margin-bottom: spacing-vertical(x-small);
        font-size: font-size(xx-large);
        line-height: 1.2; // custom line-height
    }

    .copy-meta {
        font-size: font-size(small);
        line-height: line-height(large);
    }
}
